<template>
  <div class="information">
    <div class="information-content">
      <div class="header">
        <!-- 自定义左右切换按钮 -->
        <div class="title">{{ displayTitle }}</div>
        <div class="custom-arrows">
          <div class="arrow left information-swiper-click-left">
            <svg-icon name="arrow-left" class="svg-style"></svg-icon>
          </div>
          <div
            class="arrow right information-swiper-click-right"
            @click="handleNext"
          >
            <svg-icon name="arrow-right" class="svg-style"></svg-icon>
          </div>
        </div>
      </div>
      <div class="look-all">
        <span @click="goListPage"> {{ t("homeInformation.viewAll") }} </span>
        <svg-icon
          @click="goListPage"
          name="arrow-right"
          class="svg-style"
        ></svg-icon>
      </div>
      <div class="list-courses">
        <swiper
          :modules="[SwiperNavigation]"
          :slides-per-view="4"
          :space-between="20"
          :slides-per-group="4"
          :loop="true"
          :navigation="{
            prevEl: '.information-swiper-click-left',
            nextEl: '.information-swiper-click-right',
          }"
          ref="informationRef"
          @swiper="onSwiper"
        >
          <swiper-slide v-for="(item, index) in dataList" :key="index">
            <div
              class="list-courses-item"
              :data-aos="'fade-left'"
              :data-aos-delay="index * 100"
              :class="{ 'shifted-down': index % 2 === 1 }"
            >
              <img :src="item.imageUrl" alt="" />
              <div class="title">
                <span>
                  {{ item.realtimeinfoName }}
                </span>
              </div>
              <div class="description">
                <span>
                  {{ item.remark }}
                </span>
              </div>
              <div class="btns">
                <button @click="goDetail(item.id)">
                  {{ t("homeInformation.detail") }}
                  <svg-icon name="rightArrow" class="arrow-in-btn"></svg-icon>
                </button>
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>

    <div class="information-icon">
      <img src="~/assets/web/information.png" alt="" class="svg-style" />
    </div>
  </div>
</template>

<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation as SwiperNavigation } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
const props = defineProps({
  informationList: {
    type: Array,
    default: [],
  },
  title: {
    type: String,
    default: "",
  },
  listPath: {
    type: String,
    default: "/web/consultation",
  },
  detailPath: {
    type: String,
    default: "/web/consultation",
  },
});
const dataList = ref([]);
const informationRef = ref(null);
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const displayTitle = computed(() => props.title || t("homeInformation.title"));
const listPath = computed(() => props.listPath || "/web/consultation");
const detailBasePath = computed(() => props.detailPath || "/web/consultation");

watch(
  () => props.informationList,
  (newVal) => {
    dataList.value = newVal || [];
  },
  { immediate: true, deep: true }
);

const onSwiper = (swiper) => {
  informationRef.value = swiper;
};
const goDetail = (consultationId) => {
  const { $navigate } = useNuxtApp();
  $navigate(`${detailBasePath.value}/${consultationId}`);
};
// 跳转到对应的列表页面
const goListPage = () => {
  const { $navigate } = useNuxtApp();
  $navigate(listPath.value);
};
</script>

<style lang="less" scoped>
.information {
  width: 100%;
  position: relative;

  .information-content {
    width: 100%;
    padding: 132px 110px;
    box-sizing: border-box;

    .header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        font-family: PingFang HK, PingFang HK;
        font-weight: 500;
        font-size: 40px;
        color: #171717;
        text-align: left;
        position: relative;
        padding-left: 27px;
        line-height: 50px;
        box-sizing: border-box;
      }

      .title::after {
        content: " ";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 8px;
        height: 50px;
        background: var(--theme-gradient-bg);
      }

      .custom-arrows {
        display: flex;
        justify-content: center;

        .arrow {
          width: 44px;
          height: 44px;
          background: #1d1b1b;
          border-radius: 0px 0px 0px 0px;
          text-align: center;
          line-height: 44px;
          cursor: pointer;

          .svg-style {
            color: #ec4e1e;
            font-size: 30px;
          }
        }

        .left {
          margin-right: 12px;
        }
      }
    }

    .look-all {
      margin: 20px 0 50px 0;
      font-family: PingFang HK, PingFang HK;
      font-weight: 400;
      font-size: 22px;
      color: var(--el-color-primary);
      text-align: left;
      width: auto;
      .svg-style {
        cursor: pointer;
        font-size: 26px;
      }
      span {
        cursor: pointer;
      }
    }

    .list-courses {
      width: 100%;
      display: flex;
      align-items: center;

      :deep(.swiper-wrapper) {
        align-items: flex-start;
        justify-content: flex-start;
      }

      :deep(.swiper-slide) {
        height: auto;
        display: flex;
      }

      .list-courses-item {
        background: #fff;
        padding-bottom: 34px;
        box-sizing: border-box;
        width: 100%;
        display: flex;
        flex-direction: column;
        padding-bottom: 16px;
        box-sizing: border-box;
        img {
          width: 100%;
          aspect-ratio: 1/0.68;
          object-fit: cover;
          flex-shrink: 0;
        }

        .title {
          color: #1e2021;
          text-align: left;
          flex-shrink: 0;
          margin-top: 14px;

          span {
            line-height: 33px;
            font-family: PingFang HK, PingFang HK;
            font-weight: 600;
            font-size: 22px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .description {
          text-align: left;
          margin-bottom: 20px;
          flex-grow: 1;

          span {
            font-family: PingFang HK, PingFang HK;
            font-weight: 400;
            font-size: 14px;
            color: #171717;
            line-height: 20px;
            text-align: left;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .btns {
          width: 100%;
          text-align: left;
          margin-top: 30px;
          flex-shrink: 0;

          button {
            width: 115px;
            height: 40px;
            border-radius: 0px 0px 0px 0px;
            border: 1px solid #1e2021;
            box-sizing: border-box;
            font-family: PingFang HK, PingFang HK;
            font-weight: 400;
            font-size: 14px;
            color: #1e2021;
            position: relative;
            transition: all 0.3s ease;
            cursor: pointer;

            &::after {
              content: "";
              position: absolute;
              left: 0;
              bottom: -1px;
              width: 0;
              height: 2px;
              background: var(--theme-gradient-bg);
              transition: width 0.3s ease;
            }

            &:hover::after {
              width: 100%;
            }

            .arrow-in-btn {
              font-size: 16px;
              margin-left: 5px;
              color: #1e2021;
            }
          }
        }
      }

      .shifted-down {
        margin-top: 76px;
      }
    }
  }

  .information-icon {
    position: absolute;
    right: 0;
    bottom: 50px;
    z-index: 1;

    .svg-style {
      width: 140px;
    }
  }
}
</style>
